<template>
  <div class="cashier-manage">
    <div class="commodity-title">
      商品中心
    </div>
    <div class="commodity-container">
      <ul class="cashierNav">
        <li v-for="(item, i) in navData"
            :class="{ 'li-checked' : active === i }"
            :key="i"
            @click="checkNavList(i)">{{item.name}}</li>
      </ul>
      <a-input-search
        placeholder="支付流水号/订单编号/付款单位"
        style="width:300px;margin-top:16px;"
        v-model="materialsName"
        @search="onSearch"
      >
        <img slot="prefix" style="width:13px;" src="../../../assets/image/sellerHub/searchicon.png" alt="">
        <a-button slot="enterButton">
          搜索
        </a-button>
      </a-input-search>
      <a-button style="float:right;margin-top:16px;" @click="exportMsg"
                slot="enterButton">
        <img style="width:14px;margin-right:7px;position:relative;top:-2px;"
             src="../../../assets/image/sellerHub/export.png"
             alt="">
        批量导出
      </a-button>
      <div class="cashier-search">
        <div class="cashier-search-item">
          到账时间：
          <a-config-provider :locale="locale">
            <a-range-picker style="width:16.57%;"
                            v-model="arrivalTime">
              <img slot="suffixIcon"
                   src="../../../assets/image/sellerHub/calendar.png"
                   alt="">
              <template slot="dateRender"
                        slot-scope="current">
                <div class="ant-calendar-date"
                     :style="getCurrentStyle(current)">
                  {{ current.date() }}
                </div>
              </template>
            </a-range-picker>
          </a-config-provider>
          <ul class="time-change">
            <li v-for="(item,i) in timeList"
                :key="i"
                :class="{ 'time-checked' : arrivalIndex === i }"
                @click="changeArrival(i)">{{item}}</li>
          </ul>
          订单时间：
          <a-config-provider :locale="locale">
            <a-range-picker style="width:16.57%;"
                            v-model="orderTime">
              <img slot="suffixIcon"
                   src="../../../assets/image/sellerHub/calendar.png"
                   alt="">
              <template slot="dateRender"
                        slot-scope="current">
                <div class="ant-calendar-date"
                     :style="getCurrentStyle(current)">
                  {{ current.date() }}
                </div>
              </template>
            </a-range-picker>
          </a-config-provider>
          <ul class="time-change">
            <li v-for="(item,i) in timeList"
                :key="i"
                :class="{ 'time-checked' : orderIndex === i }"
                @click="changeOrder(i)">{{item}}</li>
          </ul>
          <a-button @click="returnInit" style="position:absolute;bottom:0;right:0px;border:none;box-shadow:none;">
            重置
          </a-button>
        </div>
      </div>
      <div class="cashier-msg">
        <a-row>
          <a-col class="cashier-msg-item"
                 :span="8">
            <p>订单数</p>
            <p>{{subOrderNum || 0}}</p>
          </a-col>
          <a-col class="cashier-msg-item"
                 :span="8">
            <p>到账金额</p>
            <p>￥{{toAccountPrice || 0}}</p>
          </a-col>
          <a-col class="cashier-msg-item"
                 :span="8">
            <p>付款单位</p>
            <p>{{paymentUnitNum || 0}}</p>
          </a-col>
        </a-row>
      </div>
      <a-table :columns="columns"
               :locale="localeTable"
               :data-source="data"
               :pagination="false">
        <span slot="customTitle">支付渠道
          <a-popover v-model="visible1"
                     trigger="click">
            <div slot="title">       
              <a-checkbox-group v-model="checkedPayList">
                <a-checkbox style="margin-bottom:12px;"
                            value="A">
                  支付宝
                </a-checkbox>
                <br />
                <a-checkbox value="A">
                  微信
                </a-checkbox>
              </a-checkbox-group>
            </div>
            <div slot="content">
              <div class="popover-bottom-btn">
                <span @click="closePay">取消</span>
                <span @click="changePay">确定</span>
              </div>
            </div>
            <img style="cursor: pointer;margin-left:4px;"
                 src="../../../assets/image/sellerHub/menu_close.png"
                 alt="">
          </a-popover>
        </span>
        <span slot="accountingType">分账类型
          <a-popover v-model="visible2"
                     trigger="click">
            <div slot="title">       
              <a-checkbox-group v-model="checkedAccountList">
                <a-checkbox style="margin-bottom:12px;"
                            value="A">
                  订单支付
                </a-checkbox>
                <br />
                <a-checkbox value="A">
                  售后退款
                </a-checkbox>
              </a-checkbox-group>
            </div>
            <div slot="content">
              <div class="popover-bottom-btn">
                <span @click="closePay">取消</span>
                <span @click="changePay">确定</span>
              </div>
            </div>
            <img style="cursor: pointer;margin-left:4px;"
                 src="../../../assets/image/sellerHub/menu_close.png"
                 alt="">
          </a-popover>
        </span>
        <span slot="refStatus">状态
          <a-popover v-model="visible3"
                     trigger="click">
            <div slot="title">       
              <a-checkbox-group v-model="checkedStatusList">
                <a-checkbox style="margin-bottom:12px;"
                            value="1">
                  待退款
                </a-checkbox>
                <br />
                <a-checkbox value="2" style="margin-bottom:12px;">
                  退款中
                </a-checkbox>
                <br />
                <a-checkbox value="3" style="margin-bottom:12px;">
                  退款成功
                </a-checkbox>
                <br />
                <a-checkbox value="4">
                  退款失败
                </a-checkbox>
              </a-checkbox-group>
            </div>
            <div slot="content">
              <div class="popover-bottom-btn">
                <span @click="closePay">取消</span>
                <span @click="changePay">确定</span>
              </div>
            </div>
            <img style="cursor: pointer;margin-left:4px;"
                 src="../../../assets/image/sellerHub/menu_close.png"
                 alt="">
          </a-popover>
        </span>
        <!-- 收款 -->
        <div slot="subOrderNo" slot-scope="subOrderNo" :title="subOrderNo" class="textOverflow" style="color:#1876ff;">
          {{subOrderNo}}
        </div>
        <div slot="subOrderTime" slot-scope="subOrderTime" class="textOverflow" :title="$dateTrans(subOrderTime).format('yyyy-MM-dd hh:mm:ss')">
          {{$dateTrans(subOrderTime).format('yyyy-MM-dd hh:mm:ss')}}
        </div>
        <div slot="toAccountTime" slot-scope="toAccountTime" class="textOverflow" :title="$dateTrans(toAccountTime).format('yyyy-MM-dd hh:mm:ss')">
          {{$dateTrans(toAccountTime).format('yyyy-MM-dd hh:mm:ss')}}
        </div>
        <div slot="paymentType" slot-scope="paymentType" class="payment-type-img">
          <div v-if="paymentType == 'WECHAT'">
            <img src="../../../assets/image/sellerHub/wechat.png" alt="">
            微信
          </div>
          <div v-else-if="paymentType == 'ALIPAY'">
            <img src="../../../assets/image/sellerHub/zhifubao.png" alt="">
            支付宝
          </div>
          <div v-else-if="paymentType == 'UNION_PAY'">
            <img src="../../../assets/image/sellerHub/yinlian.png" alt="">
            银联
          </div>
          <div v-else>
            --
          </div>
        </div>
        <!-- 分账 -->

        <!-- 退款 -->

        <div slot="refundTime" slot-scope="refundTime" >
          {{$dateTrans(refundTime).format('yyyy-MM-dd hh:mm:ss')}}
        </div>

        <div slot="returnPriceEdit" slot-scope="refundStatus" >
          {{refundStatus}}
        </div>
      </a-table>
      <div class="bottom-pagination">
        <pagination style="float:right;margin:23px;"
                    @pageChange="pageChange"
                    :total="total"
                    :current="current">
        </pagination>
        <span class="paginationBefore">共 <i>{{total}}</i> 条</span>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { Table, ConfigProvider, Popover } from 'ant-design-vue'
import Pagination from '@/components/common/pagination'
import Empty from './components/emptyImg'
Vue.use(Table)
Vue.use(ConfigProvider)
Vue.use(Popover)
const proceedsList = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    width: 100
  },
  {
    title: '付款单位',
    dataIndex: 'paymentUnit',
    ellipsis: true,
    key: 'paymentUnit',
  },
  {
    dataIndex: 'paymentType',
    key: 'paymentType',
    ellipsis: true,
    scopedSlots: { customRender: 'paymentType' },
    slots: { title: 'customTitle' },
  },
  {
    title: '订单编号',
    dataIndex: 'subOrderNo',
    scopedSlots: { customRender: 'subOrderNo' },
    ellipsis: true,
  },
  {
    title: '订单时间',
    dataIndex: 'subOrderTime',
    scopedSlots: { customRender: 'subOrderTime' },
    ellipsis: true,
  },
  {
    title: '支付流水号',
    dataIndex: 'paySerialNum',
    key: 'paySerialNum',
    ellipsis: true,
  },
  {
    title: '到账时间',
    dataIndex: 'toAccountTime',
    scopedSlots: { customRender: 'toAccountTime' },
    key: 'toAccountTime',
    ellipsis: true,
  },
  {
    title: '商品金额(元)',
    dataIndex: 'materialPrice',
    key: 'materialPrice',
    ellipsis: true,
  },
  {
    title: '到账金额(元)',
    dataIndex: 'toAccountPrice',
    key: 'toAccountPrice',
    ellipsis: true,
  },
];
const subAccountList = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    width: 100
  },
  {
    title: '付款单位',
    dataIndex: 'paymentUnit',
    ellipsis: true,
    key: 'paymentUnit',
  },
  {
    dataIndex: 'paymentType',
    key: 'paymentType',
    ellipsis: true,
    scopedSlots: { customRender: 'paymentType' },
    slots: { title: 'customTitle' },
  },
  {
    dataIndex: 'subAccountingType',
    key: 'subAccountingType',
    ellipsis: true,
    scopedSlots: { customRender: 'subAccountingType' },
    slots: { title: 'accountingType' },
  },
  {
    title: '商品金额(元)',
    dataIndex: 'materialPrice',
    key: 'materialPrice',
    ellipsis: true,
  },
  {
    title: '订单金额(元)',
    dataIndex: 'orderPrice',
    key: 'orderPrice',
    ellipsis: true,
  },
  {
    title: '税费补差金额(元)',
    dataIndex: 'taxPrice',
    key: 'taxPrice',
    ellipsis: true,
  },
  {
    title: '附加费金额(元)',
    dataIndex: 'additionalPrice',
    key: 'additionalPrice',
    ellipsis: true,
  },
  {
    title: '平台服务费(元)',
    dataIndex: 'platformPrice',
    key: 'platformPrice',
    ellipsis: true,
  },
  {
    title: '分账金额(元)',
    dataIndex: 'subAccountingPrice',
    key: 'subAccountingPrice',
    ellipsis: true,
  },
];
const refundList = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    width: 100
  },
  {
    title: '付款单位',
    dataIndex: 'paymentUnit',
    ellipsis: true,
    key: 'paymentUnit',
  },
  {
    dataIndex: 'paymentType',
    key: 'paymentType',
    ellipsis: true,
    scopedSlots: { customRender: 'paymentType' },
    slots: { title: 'customTitle' },
  },
  {
    title: '订单编号',
    dataIndex: 'subOrderNo',
    scopedSlots: { customRender: 'subOrderNo' },
    ellipsis: true,
  },
  {
    title: '售后编号',
    dataIndex: 'afterSalesNo',
    key: 'afterSalesNo',
    ellipsis: true,
  },
  {
    title: '退款到账时间',
    dataIndex: 'refundTime',
    scopedSlots: { customRender: 'refundTime' },
    ellipsis: true,
  },
  {
    title: '退款流水号',
    dataIndex: 'refundSerialNum',
    key: 'refundSerialNum',
    ellipsis: true,
  },
  {
    title: '退款金额(元)',
    dataIndex: 'refundPrice',
    key: 'refundPrice',
    ellipsis: true,
  },
  {
    dataIndex: 'refundStatus',
    key: 'refundStatus',
    ellipsis: true,
    scopedSlots: { customRender: 'refundStatus' },
    slots: { title: 'refStatus' },
  },
  {
    title: '操作',
    dataIndex: 'returnPriceEdit',
    scopedSlots: { customRender: 'returnPriceEdit' },
    ellipsis: true,
  },
];
export default {
  components: { Pagination },
  data () {
    return {
      data:[],
      columns: proceedsList,
      visible1: false,
      visible2: false,
      visible3: false,
      locale: zhCN,
      localeTable:{emptyText:<Empty />},
      materialsName: '',//支付流水号/订单编号/付款单位
      navData: [
        { name: '收款' },
        { name: '分账' },
        { name: '退款' },
      ],
      active: 0,//选中项
      arrivalTime: [],//到账时间
      orderTime: [],//订单时间
      timeList: ['今日', '昨日', '最近7天', '最近30天'],
      arrivalIndex: -1,//到账时间选择
      orderIndex: -1,//订单时间选择
      checkedPayList: [],//支付方式
      checkedAccountList: [],//分账类型
      checkedStatusList: [],//状态
      total: 0,//总条数
      current: 1,//当前页
      pageSize: 10,//列表每页展示数量
      subOrderNum: 0,
      toAccountPrice: 0,
      paymentUnitNum: 0,
    }
  },
  created () {
    this.init();
  },
  computed: {
    _params () {
      //查询参数
      return {
        "pageNo": this.current,
        "pageSize": this.pageSize,
        "searchName": this.materialsName,
        "subOrderDateEnd": this.orderTime[1],
        "subOrderDateStart": this.orderTime[0],
        "subOrderDateType": 0,
        "supplierId": "",
        "toAccountDateEnd": this.arrivalTime[1],
        "toAccountDateStart": this.arrivalTime[0],
        "toAccountType": 0
      }
    }
  },
  watch: {
    _params(_val) {
      this.init();
    }
  },
  methods: {
    init () {
      let _API = this.$api.sellerCenter.getProceedsPage;
      let _StatisticalAPI = this.$api.sellerCenter.getProceedsStatistical;
      let _columns = proceedsList;
      this.active == 0?_API = this.$api.sellerCenter.getProceedsPage:
      this.active == 1?_API = this.$api.sellerCenter.getSubAccountingPage:
      _API = this.$api.sellerCenter.getRefundPage;
      this.active == 0?_StatisticalAPI = this.$api.sellerCenter.getProceedsStatistical:
      this.active == 1?_StatisticalAPI = this.$api.sellerCenter.getSubAccountingStatistical:
      _StatisticalAPI = this.$api.sellerCenter.getRefundStatistical;
      this.active == 0?_columns = proceedsList:
      this.active == 1?_columns = subAccountList:
      _columns = refundList;
      this.columns = _columns;
      //重置
      this.subOrderNum = 0;
      this.toAccountPrice = 0;
      this.paymentUnitNum = 0;
      this.data = [];
      this.total = 0;
      //table列表
      this.$store.dispatch('request', _API(
          this._params
        )).then(({result}) => {
          console.log(result)
          this.total = result.total;
          result.records.map(n => {})
          this.data = result.records.map((n,i) => {return {index:i+1,...n}});
        }).catch(() => {
          this.$message.error('')
        })
      //订单数
      this.$store.dispatch('request', _StatisticalAPI(
        this._params
      )).then(({result}) => {
        console.log(result)
        this.subOrderNum = result.subOrderNum;
        this.toAccountPrice = result.toAccountPrice;
        this.paymentUnitNum = result.paymentUnitNum;
      }).catch(() => {
        this.$message.error('')
      })  
    },
    onSearch () {

    },
    exportMsg() {
      //导出
      let _API = this.$api.sellerCenter.proceedsExportData;
      this.active == 0?_API = this.$api.sellerCenter.proceedsExportData:
      this.active == 1?_API = this.$api.sellerCenter.subAccountingExportData:
      _API = this.$api.sellerCenter.refundExportData;
      this.$store.dispatch('request', _API(
        this._params
      )).then(({result}) => {
        console.log(result)
        
      }).catch(() => {
        this.$message.error('')
      })  
    },
    checkNavList (_index) {
      //收款、分账、退款tab切换
      this.active = _index;
      this.init();
    },
    changeArrival (_index) {
      //到账时间
      _index == 0 ?
        this.arrivalTime = [this.getDate(0), this.getDate(0)]
        : _index == 1 ?
          this.arrivalTime = [this.getDate(-1), this.getDate(-1)]
          : _index == 2 ?
            this.arrivalTime = [this.getDate(-7), this.getDate(0)]
            : _index == 3 ?
              this.arrivalTime = [this.getDate(-30), this.getDate(0)] : []
      this.arrivalIndex = _index;
    },
    changeOrder (_index) {
      //订单时间
      _index == 0 ?
        this.orderTime = [this.getDate(0), this.getDate(0)]
        : _index == 1 ?
          this.orderTime = [this.getDate(-1), this.getDate(-1)]
          : _index == 2 ?
            this.orderTime = [this.getDate(-7), this.getDate(0)]
            : _index == 3 ?
              this.orderTime = [this.getDate(-30), this.getDate(0)] : []
      this.orderIndex = _index;
    },
    getDate (day) {
      //获取时间day:时间参数-1则是前一天
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth (month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    getCurrentStyle (current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = '1px solid #1890ff';
        style.borderRadius = '50%';
      }
      return style;
    },
    returnInit() {
      //重置
      
    },
    closePay () {
      //关闭气泡
      this.visible1 = false;
    },
    closeAccount () {
      //关闭气泡
      this.visible2 = false;
    },
    changePay () {
      //支付渠道
    },
    changeAccount () {
      //分帐类型
    },
    pageChange (_page) {
      //改变页码
      this.current = _page;
      this.pageNo = _page;
      this.init();
    },
  },
}
</script>
<style lang="less">
ul,
li,
i {
  list-style: none;
  margin: 0;
  padding: 0;
  font-style: normal;
}
.cashier-manage {
  .textOverflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    width: 100%;
  }
  .commodity-title {
    width: 100%;
    height: 54px;
    line-height: 54px;
    padding-left: 24px;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
  }
  .commodity-container {
    background: #fff;
    margin: 16px;
    width: calc(100% - 32px);
    min-height: 800px;
    padding: 24px;
    overflow: hidden;
  }
}
.cashierNav {
  width: 100%;
  border-bottom: 1px solid rgba(39, 36, 36, 0.08);
  overflow: hidden;
  li {
    float: left;
    margin-right: 40px;
    line-height: 46px;
    height: 46px;
    cursor: pointer;
  }
  .li-checked {
    color: @activeRed;
    border-bottom: 3px solid @activeRed;
  }
  li:hover {
    color: @activeRed;
    border-bottom: 3px solid @activeRed;
  }
}
.cashier-search {
  width: 100%;
  opacity: 1;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0px 0px 6px 1px rgba(39, 36, 36, 0.08);
  margin: 16px 0;
  padding: 24px;
  font-size: 12px;
}
.cashier-search-item {
  position: relative;
}
.time-change {
  overflow: hidden;
  display: inline-block;
  padding-left: 1px;
  vertical-align: middle;
  margin:0 16px;
  li {
    float: left;
    padding: 0 10px;
    line-height: 32px;
    height: 32px;
    border: 1px solid rgba(49, 49, 69, 0.08);
    cursor: pointer;
    box-sizing: border-box;
    margin-left: -1px;
  }
  li:hover {
    border: 1px solid @activeRed;
    background: rgba(215, 55, 55, 0.08);
  }
  .time-checked {
    border: 1px solid @activeRed;
    background: rgba(215, 55, 55, 0.08);
  }
}
.cashier-msg {
  width: 100%;
  height: 114px;
  border: 1px solid rgba(39, 36, 36, 0.08);
  padding: 30px 25px;
  margin-bottom: 16px;
  .cashier-msg-item {
    border-right: 2px solid #eff0f4;
    height: 50px;
    line-height: 50px;
    padding-left: 40px;
    p {
      margin: 0;
      height: 25px;
      line-height: 25px;
      color: #272424;
      font-size: 18px;
      font-weight: 600;
    }
    p:first-child {
      font-size: 14px;
      opacity: 0.6;
      font-weight: 400;
    }
  }
  .cashier-msg-item:first-child {
    padding-left: 0;
  }
  .cashier-msg-item:last-child {
    border: none;
  }
}
.popover-bottom-btn {
  text-align: center;
  span {
    height: 24px;
    line-height: 24px;
    display: inline-block;
    margin: 0 8px;
    border: 1px solid rgba(39, 36, 36, 0.08);
    cursor: pointer;
    padding: 0 8px;
    font-size: 12px;
  }
  span:last-child {
    border: 1px solid @activeRed;
    background: @activeRed;
    color: #fff;
  }
}
.bottom-pagination > .paginationBefore {
  float: right;
  line-height: 70px;
  i {
    color: @activeRed;
  }
}
.bottom-pagination {
  position: fixed;
  bottom: 0;
  width: calc(100% - 178px);
  background: #fff;
  right: 0;
  box-shadow: 0px -2px 2px 0px rgba(39,36,36,0.02);
  padding-right: 30px;
  z-index: 3;
}
.ant-input {
  font-size: 12px;
}
.payment-type-img img {
  width: 16px;
  display: inline-block;
}
</style>